<template>
    <!-- v-bind:style="{ backgroundImage: 'url(' + backgroundImageUrl + ')' }" -->
    <!-- <img :src="imgSrc" width="100%" height="100%" alt="" /> -->
    <div id="LoginOrRegister">
        <div class="loginPart">
            <h2 v-show="isShow">用户登录</h2>
            <h2 v-show="!isShow">用户注册</h2>
            <div v-show="!isShow">
                <form id="myform" name="myform" method="post" enctype="multipart/form-data"
                    action="http://localhost:5193/File/Upload/FormImg">
                    <div class="AvatarBox">
                        <input class="Avatar" type="file" name="files" value="" multiple />
                    </div>
                </form>
            </div>
            <el-form>
                <div class="inputElement">
                    <el-input v-model="UserLoginOrRegister.Username" placeholder="请输入用户名 "></el-input>
                </div>
                <div class="inputElement">
                    <el-input type="password" v-model="UserLoginOrRegister.Password" placeholder="请输入密码 ">
                    </el-input>
                </div>
                <div>
                    <el-button type="primary" v-show="isShow" @click="Login">登录</el-button>
                    <el-button type="primary" v-show="!isShow" @click="Register">点击注册</el-button>
                </div>
                <div style="text-align: right;color: white;">
                    <el-link type="warning" v-show="isShow" @click="GoRegister">没有账号？去注册</el-link>
                    <!-- <el-link type="warning" v-show="!isShow" @click="Register">点击注册</el-link> -->
                </div>
            </el-form>
        </div>
    </div>
</template>



<script>
    //使用axios发出第一次登入请求
    const axios = require("axios");
    //存储token和refreshToken
    import {
        setToken,
        setUserInfo
    } from '../utils/auth.js'
    //导入api的user.js 操作
    import {
        login,
        register
    } from '../api/user.js'



    export default {
        name: 'LoginOrRegister',
        components: {},
        data() {
            return {
                // imgSrc: require('背景图片路径'),
                UserLoginOrRegister: {
                    Username: "",
                    Password: "",
                    AvatarId: "",
                },
                backgroundImageUrl: "",
                isShow: true
            }
        },
        methods: {
            //第一次登入不需要使用axios拦截器功能，但需要去本地存储token和refreshToken
            Login() {
                //如果不是注册来的，则初始化一个假的Guid为了能匹配登入的传输参数不会是Bad request
                if (this.UserLoginOrRegister.AvatarId == "") {
                    this.UserLoginOrRegister.AvatarId = "00000000-0000-0000-0000-000000000000"
                }
                login(this.UserLoginOrRegister).then(res => {
                    //本地存储token和refreshToken
                    setToken(res.token.accessToken, res.token.refreshToken);
                    //本地存储用户信息
                    setUserInfo(res.user)
                    if (res.token.accessToken != null) {
                        //登入跳转个人主页
                        this.$router.push({
                            path: 'index',
                            query: {
                                avatarId: res.user.avatarId,
                                username: res.user.username
                            }
                        })
                    } else {
                        this.$router.push('notfound')
                    }
                });
            },
            //注册，不需要使用axios拦截器功能
            GoRegister() {
                this.isShow = false;
            },
            Register() {
                //上传头像
                var formdata = new FormData(document.getElementById("myform")); //获取表单的数据

                //定义允许通过的格式数组
                var permittedExtensions = [".jpg", ".png"];
                // console.log(formdata.get("files"));
                // console.log(permittedExtensions);

                //定义头像信息
                var Suffix = formdata.get("files").name.substring(formdata.get("files").name.lastIndexOf("."));
                var Size = formdata.get("files").size;
                // var Type = formdata.get("files").type
                // console.log(Suffix, Size, Type);

                //注册时对头像进行判断（Type就不判断了，因为后缀已经包含了）
                var index = permittedExtensions.indexOf(Suffix)
                if (index == -1 || Size > 1024 * 1024 * 2) {
                    alert("图片格式错误或大小不得超过2M");
                } else {
                    axios.post(`http://localhost:5193/File/Upload/FormImg`, formdata).then(res => {
                        //把头像文件的Id赋值给注册用户的AvatarId
                        console.log(res);
                        this.UserLoginOrRegister.AvatarId = res.data.saveFilesInfo[0].id
                            //注册用户 
                        register(this.UserLoginOrRegister).then(res => {
                            if (res.code == 1000) {
                                alert("注册成功!");
                                //注册成功转为登入
                                this.isShow = true;
                            } else {
                                this.$router.push('notfound')
                            }
                        })
                    })
                }
            }
        },
    }
</script>


<style>
    .AvatarBox {
        background: url('@/assets/Avatar.jpg');
        margin-left: 135px;
        margin-bottom: 20px;
    }
    
    .Avatar {
        opacity: 0
    }
    
    .AvatarBox,
    .Avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #fff;
    }
    
    #LoginOrRegister {
        width: 100%;
        height: 780px;
        /* 登入页面的背景图片 */
        background: url('@/assets/nigth.gif');
        /* background-repeat: no-repeat */
        color: #fff;
    }
    /*  */
    
    .loginPart {
        position: absolute;
        /*定位方式绝对定位absolute*/
        top: 50%;
        left: 50%;
        /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
        transform: translate(-50%, -50%);
        /*实现块元素百分比下居中*/
        width: 450px;
        padding: 50px;
        background: rgba(0, 0, 0, .5);
        /*背景颜色为黑色，透明度为0.8*/
        box-sizing: border-box;
        /*box-sizing设置盒子模型的解析模式为怪异盒模型，
            将border和padding划归到width范围内*/
        box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
        /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
        border-radius: 15px;
        /*边框圆角，四个角均为15px*/
    }
    
    .loginPart h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
        /*文字居中*/
    }
    
    .loginPart .inputbox {
        position: relative;
    }
    
    .loginPart .inputElement input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        /*字符间的间距1px*/
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff;
        outline: none;
        /*outline用于绘制元素周围的线
            outline：none在这里用途是将输入框的边框的线条使其消失*/
        background: transparent;
        /*背景颜色为透明*/
    }
    
    .login {
        width: 100%;
        height: 100%;
    }
</style>
<!-- https://www.tutieshi.com/cut/  gif裁减 -->